<script setup name="staffadd">
import OAMain from "@/components/OAMain.vue";
import OADialog from "@/components/OADialog.vue";
import { ref, reactive } from "vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import stafffHttp from "@/api/stafffHttp";

const router = useRouter();
const authStroe = useAuthStore();
let formRef = ref();
let staffForm = reactive({
    email: "",
    password: "",
    realname: "",
});

let rules = reactive({
    email: [{ required: true, message: "请输入邮箱！", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码！", trigger: "blur" }],
    realname: [{ required: true, message: "请输入真实姓名！", trigger: "blur" }],
});


const onSubmit = () =>{
    formRef.value.validate(async (vaild, fields) => {
        if(vaild){
            try{
                await stafffHttp.addStaff(staffForm.realname, staffForm.email, staffForm.password)
                ElMessage.success("员工添加成功!")
                router.push({name:'staff_list'})

            }catch{
                ElMessage.error(detail)
            }
        }
    })
}


</script>

<template>
    <OAMain title="新增员工">
        <el-card shadow="always">
            <el-form :rules="rules" ref="formRef" :model="staffForm" label-width="80px">
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="staffForm.realname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="staffForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="staffForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item label="部门">
                    <el-input readonly disabled placeholder="请输入部门" :value="authStroe.user.department.name"></el-input>
                </el-form-item>

                <el-form-item label="管理者">
                    <el-input readonly disabled :placeholder="'[' + authStroe.user.realname + ']' + authStroe.user.email
                        "></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit"> 提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </OAMain>
</template>

<style scoped></style>
